<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Form - Stilearn Admin Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="" />
        <meta name="author" content="stilearning" />

        <!-- google font -->
        <link href="http://fonts.useso.com/css?family=Aclonica:regular" rel="stylesheet" type="text/css" />

        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <link href="css/stilearn.css" rel="stylesheet" />
        <link href="css/stilearn-responsive.css" rel="stylesheet" />
        <link href="css/stilearn-helper.css" rel="stylesheet" />
        <link href="css/stilearn-icon.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
        <link href="css/animate.css" rel="stylesheet" />
        <link href="css/uniform.default.css" rel="stylesheet" />
        
        <link href="css/datepicker.css" rel="stylesheet" />
        <link href="css/colorpicker.css" rel="stylesheet" />
        <link href="css/select2.css" rel="stylesheet" />
        <link href="css/bootstrap-wysihtml5.css" rel="stylesheet" />
        
        <link href="css/responsive-tables.css" rel="stylesheet" />
        
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    
    <body>
        <!-- section header -->
        <header class="header" data-spy="affix" data-offset-top="0">
            <!--nav bar helper-->
            <div class="navbar-helper">
                <div class="row-fluid">
                    <!--panel site-name-->
                    <div class="span2">
                        <div class="panel-sitename">
                            <h2><a href="index.html"><span class="color-teal">Sti</span>learn</a></h2>
                        </div>
                    </div>
                    <!--/panel name-->

                    <div class="span6">
                        <!--panel search-->
                        <div class="panel-search">
                            <form />
                                <div class="input-icon-append">
                                    <button type="submit" rel="tooltip-bottom" title="search" class="icon"><i class="icofont-search"></i></button>
                                    <input class="input-large search-query grd-white" maxlength="23" placeholder="Search here..." type="text" />
                                </div>
                            </form>
                        </div><!--/panel search-->
                    </div>
                    <div class="span4">
                        <!--panel button ext-->
                        <div class="panel-ext">
                            <div class="btn-group">
                                <!--notification-->
                                <a class="btn btn-danger btn-small" data-toggle="dropdown" href="#" title="3 notification">3</a>
                                <ul class="dropdown-menu dropdown-notification">
                                    <li class="dropdown-header grd-white"><a href="#">View All Notifications</a></li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- <li class="dropdown-footer"><a href=""></a></li> -->
                                </ul><!--notification-->
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                                    Shortcut
                                </a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                    <li><a tabindex="-1" href="calendar.html">Calendar</a></li>
                                    <li><a tabindex="-1" href="invoice.html">Invoice</a></li>
                                    <li><a tabindex="-1" href="message.html">Message</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Sample Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="pricing.html">Pricing</a></li>
                                            <li><a tabindex="-1" href="bonus-page/resume/index.html">Resume</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Error Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="403.html">Error 403</a></li>
                                            <li><a tabindex="-1" href="404.html">Error 404</a></li>
                                            <li><a tabindex="-1" href="405.html">Error 405</a></li>
                                            <li><a tabindex="-1" href="500.html">Error 500</a></li>
                                            <li><a tabindex="-1" href="503.html">Error 503</a></li>
                                            <li><a tabindex="-1" href="under-construction.html">Under Construction</a></li>
                                            <li><a tabindex="-1" href="coming-son.html">Coming Son</a></li>
                                        </ul>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small" href="#">Other Action</a>
                            </div>
                            <div class="btn-group user-group">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <img class="corner-all" align="middle" src="img/user-thumb.jpg" title="John Doe" alt="john doe" /> <!--this for display on PC device-->
                                    <button class="btn btn-small btn-inverse">John Doe</button> <!--this for display on tablet and phone device-->
                                </a>
                                <ul class="dropdown-menu dropdown-user" role="menu" aria-labelledby="dLabel">
                                    <li>
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="img-circle" src="img/user.jpg" title="profile" alt="profile" />
                                            </a>
                                            <div class="media-body description">
                                                <p><strong>John Doe</strong></p>
                                                <p class="muted">johndoe@mail.com</p>
                                                <p class="action"><a class="link" href="#">Activity</a> - <a class="link" href="#">Setting</a></p>
                                                <a class="btn btn-primary btn-small btn-block">View Profile</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="dropdown-footer">
                                        <div>
                                            <a class="btn btn-small pull-right" href="login.html">Logout</a>
                                            <a class="btn btn-small" href="#">Add Account</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div><!--panel button ext-->
                    </div>
                </div>
            </div><!--/nav bar helper-->
        </header>

        <!-- section content -->
        <section class="section">
            <div class="row-fluid">
                <!-- span side-left -->
                <div class="span1">
                    <!--side bar-->
                    <aside class="side-left">
                        <ul class="sidebar">
                            <li>
                                <a href="index.html" title="dashboard">
                                    <div class="helper-font-24">
                                        <i class="icofont-dashboard"></i>
                                    </div>
                                    <span class="sidebar-text">Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a href="interface.html" title="interface">
                                    <div class="helper-font-24">
                                        <i class="icofont-magnet"></i>
                                    </div>
                                    <span class="sidebar-text">Interface</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="form.html" title="form">
                                    <div class="badge badge-important">3</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-edit"></i>
                                    </div>
                                    <span class="sidebar-text">Form</span>
                                </a>
                                <ul class="sub-sidebar-form corner-top shadow-white">
                                    <li class="title muted">Quick Upload</li>
                                    <li>
                                        <input type="file" data-form="uniform" onchange="alert('your progres uploading file...')" />
                                    </li>
                                    <li class="divider"></li>
                                    <li class="active">
                                        <a href="form.html" title="form element" class="corner-all">
                                            <i class="icofont-file"></i>
                                            <span class="sidebar-text">Form Element</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="code_editor.html" title="code editor" class="corner-all">
                                            <i class="icofont-book"></i>
                                            <span class="sidebar-text">Code Editor</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="gallery.html" title="gallery" class="corner-all">
                                            <i class="icofont-picture"></i>
                                            <span class="sidebar-text">Gallery</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="charts.html" title="charts">
                                    <div class="helper-font-24">
                                        <i class="icofont-bar-chart"></i>
                                    </div>
                                    <span class="sidebar-text">charts</span>
                                </a>
                            </li>
                            <li>
                                <a href="tables.html" title="table">
                                    <div class="helper-font-24">
                                        <i class="icofont-table"></i>
                                    </div>
                                    <span class="sidebar-text">Tables</span>
                                </a>
                            </li>
                            <li>
                                <a href="grids.html" title="grids">
                                    <div class="helper-font-24">
                                        <i class="icofont-columns"></i>
                                    </div>
                                    <span class="sidebar-text">Grids</span>
                                </a>
                            </li>
                            <li>
                                <a href="icons.html" title="icons">
                                    <div class="helper-font-24">
                                        <i class="icofont-star"></i>
                                    </div>
                                    <span class="sidebar-text">Icons</span>
                                </a>
                            </li>
                            <li>
                                <a href="widgets.html" title="widgets">
                                    <div class="helper-font-24">
                                        <i class="icofont-reorder"></i>
                                    </div>
                                    <span class="sidebar-text">Widgets</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="more">
                                    <div class="badge badge-important">5</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-th-large"></i>
                                    </div>
                                    <span class="sidebar-text">More</span>
                                </a>
                                <ul class="sub-sidebar corner-top shadow-silver-dark">
                                    <li>
                                        <a href="404.html" title="not found">
                                            <div class="helper-font-24">
                                                <i class="icofont-warning-sign"></i>
                                            </div>
                                            <span class="sidebar-text">404</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="login.html" title="login">
                                            <div class="helper-font-24">
                                                <i class="icofont-lock"></i>
                                            </div>
                                            <span class="sidebar-text">Login</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="invoice.html" title="invoice">
                                            <div class="helper-font-24">
                                                <i class="icofont-barcode"></i>
                                            </div>
                                            <span class="sidebar-text">Invoice</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="pricing.html" title="pricing table">
                                            <div class="helper-font-24">
                                                <i class="icofont-briefcase"></i>
                                            </div>
                                            <span class="sidebar-text">Pricing</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="bonus-page/resume/index.html" title="resume">
                                            <div class="helper-font-24">
                                                <i class="icofont-user"></i>
                                            </div>
                                            <span class="sidebar-text">Resume</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </aside><!--/side bar -->
                </div><!-- span side-left -->
                
                <!-- span content -->
                <div class="span9">
                    <!-- content -->
                    <div class="content">
                        <!-- content-header -->
                        <div class="content-header">
                            <ul class="content-header-action pull-right">
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-green color-white"><i class="icofont-plus-sign"></i></div>
                                        <div class="action-text color-green">8765 <span class="helper-font-small color-silver-dark">Visits</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-teal color-white"><i class="icofont-user-md"></i></div>
                                        <div class="action-text color-teal">1437 <span class="helper-font-small color-silver-dark">Users</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-orange color-white">$</div>
                                        <div class="action-text color-orange">4367 <span class="helper-font-small color-silver-dark">Orders</span></div>
                                    </a>
                                </li>
                            </ul>
                            <h2><i class="icofont-file"></i> Form Elements</h2>
                        </div><!-- /content-header -->
                        
                        <!-- content-breadcrumb -->
                        <div class="content-breadcrumb">
                            <!--breadcrumb-nav-->
                            <ul class="breadcrumb-nav pull-right">
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#" class="btn btn-small btn-link dropdown-toggle" data-toggle="dropdown">
                                        <i class="icofont-cogs"></i> Controls
                                        <i class="icofont-caret-down"></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#element" class="scroll">Element</a></li>
                                        <li><a href="#validation" class="scroll">Validation</a></li>
                                        <li><a href="#wizard" class="scroll">Wizard</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#extending" class="scroll">Extending</a></li>
                                        <li><a href="#controls" class="scroll">Controls</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#buttons" class="scroll">Buttons</a></li>
                                    </ul>
                                </li>
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#" class="btn btn-small btn-link">
                                        <i class="icofont-user"></i> Users <span class="color-red">(+34)</span>
                                    </a>
                                </li>
                            </ul><!--/breadcrumb-nav-->
                            
                            <!--breadcrumb-->
                            <ul class="breadcrumb">
                                <li><a href="index.html"><i class="icofont-home"></i> Dashboard</a> <span class="divider">&rsaquo;</span></li>
                                <li><a href="form.html">Form</a> <span class="divider">&rsaquo;</span></li>
                                <li class="active">Data elements</li>
                            </ul><!--/breadcrumb-->
                        </div><!-- /content-breadcrumb -->
                        
                        <!-- content-body -->
                        <div class="content-body">
                            <!-- form -->
                            <div class="row-fluid">
                                <div class="span12">
                                    
                                    <!-- =========================================
                                                        ELEMENT
                                    =========================================== -->
                                    <!--element-->
                                    <div id="element" class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Elements</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!--element-->
                                                    <form class="form-horizontal" />
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputAuto">Auto Complete</label>
                                                            <div class="controls">
                                                                <input type="text" id="inputAuto" class="grd-white" />
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputAuto">Tags</label>
                                                            <div class="controls">
                                                                <input type="hidden" id="inputTags" style="width:200px;" value="brown, red, green" />
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputDate">Date</label>
                                                            <div class="controls">
                                                                <div class="input-append date" data-form="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                                                                    <input id="inputDate" class="grd-white" data-form="datepicker" size="16" type="text" value="12-02-2012" />
                                                                    <span class="add-on"><i class="icon-th"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputColorHex">Color (hex)</label>
                                                            <div class="controls">
                                                                <div class="input-append color" data-form="colorpicker" data-color="#00ffcc" data-color-format="hex">
                                                                    <input type="text" class="grd-white" id="inputColorHex" value="#00ffcc" />
                                                                    <span class="add-on"><i style="background-color: #00ffcc"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputColorRgba">Color (rgba)</label>
                                                            <div class="controls">
                                                                <div class="input-append color" data-form="colorpicker" data-color="rgba(255, 146, 180, 0.8)" data-color-format="rgba">
                                                                    <input type="text" class="grd-white" id="inputColorRgba" value="rgba(255, 146, 180, 0.8)" />
                                                                    <span class="add-on"><i style="background-color: rgba(255, 146, 180, 0.8)"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label">Radio</label>
                                                            <div class="controls">
                                                                <label class="radio">
                                                                    <input type="radio" data-form="uniform" name="optionsRadios" id="optionsRadios1" value="option1" checked="" />
                                                                    Option one is this and that—be sure to include why it's great
                                                                </label>
                                                                <label class="radio">
                                                                    <input type="radio" data-form="uniform" name="optionsRadios" id="optionsRadios2" value="option2" />
                                                                    Option two can be something else and selecting it will deselect option one
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label">Checkbox</label>
                                                            <div class="controls">
                                                                <label class="checkbox">
                                                                    <input type="checkbox" data-form="uniform" name="inputCheckbox" id="inlineCheckbox1" value="option1" /> 1
                                                                </label>
                                                                <label class="checkbox">
                                                                    <input type="checkbox" data-form="uniform" name="inputCheckbox" id="inlineCheckbox2" value="option2" /> 2
                                                                </label>
                                                                <label class="checkbox">
                                                                    <input type="checkbox" data-form="uniform" name="inputCheckbox" id="inlineCheckbox3" value="option3" /> 3
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputUpload">Upload</label>
                                                            <div class="controls">
                                                                <input type="file" data-form="uniform" id="inputUpload" />
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputSelect">Select</label>
                                                            <div class="controls">
                                                                <select id="inputSelect" data-form="select2" style="width:200px" data-placeholder="Your Favorite Type of Bear">
                                                                    <option />American Black Bear
                                                                    <option />Asiatic Black Bear
                                                                    <option />Brown Bear
                                                                    <option />Giant Panda
                                                                    <option selected="" />Sloth Bear
                                                                    <option disabled="" />Sun Bear
                                                                    <option />Polar Bear
                                                                    <option disabled="" />Spectacled Bear
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputSelectMulti">Multiple Select</label>
                                                            <div class="controls">
                                                                <select id="inputSelectMulti" data-form="select2" style="width:200px" data-placeholder="Your Favorite Type of Bear" multiple="">
                                                                    <option />American Black Bear
                                                                    <option />Asiatic Black Bear
                                                                    <option />Brown Bear
                                                                    <option />Giant Panda
                                                                    <option selected="" />Sloth Bear
                                                                    <option disabled="" />Sun Bear
                                                                    <option />Polar Bear
                                                                    <option disabled="" />Spectacled Bear
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputSelectGroup">Select Group</label>
                                                            <div class="controls">
                                                                <select id="inputSelectGroup" data-form="select2" style="width:200px" data-placeholder="Your Favorite Football Team">
                                                                    <option value="" />
                                                                    <optgroup label="NFC EAST">
                                                                        <option />Dallas Cowboys
                                                                        <option />New York Giants
                                                                        <option />Philadelphia Eagles
                                                                        <option />Washington Redskins
                                                                    </optgroup>
                                                                    <optgroup label="NFC NORTH">
                                                                        <option />Chicago Bears
                                                                        <option />Detroit Lions
                                                                        <option />Green Bay Packers
                                                                        <option />Minnesota Vikings
                                                                    </optgroup>
                                                                    <optgroup label="NFC SOUTH">
                                                                        <option />Atlanta Falcons
                                                                        <option />Carolina Panthers
                                                                        <option />New Orleans Saints
                                                                        <option />Tampa Bay Buccaneers
                                                                    </optgroup>
                                                                    <optgroup label="NFC WEST">
                                                                        <option />Arizona Cardinals
                                                                        <option />St. Louis Rams
                                                                        <option />San Francisco 49ers
                                                                        <option />Seattle Seahawks
                                                                    </optgroup>
                                                                    <optgroup label="AFC EAST">
                                                                        <option />Buffalo Bills
                                                                        <option />Miami Dolphins
                                                                        <option />New England Patriots
                                                                        <option />New York Jets
                                                                    </optgroup>
                                                                    <optgroup label="AFC NORTH">
                                                                        <option />Baltimore Ravens
                                                                        <option />Cincinnati Bengals
                                                                        <option />Cleveland Browns
                                                                        <option />Pittsburgh Steelers
                                                                    </optgroup>
                                                                    <optgroup label="AFC SOUTH">
                                                                        <option />Houston Texans
                                                                        <option />Indianapolis Colts
                                                                        <option />Jacksonville Jaguars
                                                                        <option />Tennessee Titans
                                                                    </optgroup>
                                                                    <optgroup label="AFC WEST">
                                                                        <option />Denver Broncos
                                                                        <option />Kansas City Chiefs
                                                                        <option />Oakland Raiders
                                                                        <option />San Diego Chargers
                                                                    </optgroup>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputSelectMultiGroup">Multiple Select Group</label>
                                                            <div class="controls">
                                                                <select id="inputSelectMultiGroup" data-form="select2" style="width:200px" data-placeholder="Your Favorite Football Team" multiple="">
                                                                    <option value="" />
                                                                    <optgroup label="NFC EAST">
                                                                        <option />Dallas Cowboys
                                                                        <option />New York Giants
                                                                        <option />Philadelphia Eagles
                                                                        <option />Washington Redskins
                                                                    </optgroup>
                                                                    <optgroup label="NFC NORTH">
                                                                        <option />Chicago Bears
                                                                        <option />Detroit Lions
                                                                        <option />Green Bay Packers
                                                                        <option />Minnesota Vikings
                                                                    </optgroup>
                                                                    <optgroup label="NFC SOUTH">
                                                                        <option />Atlanta Falcons
                                                                        <option />Carolina Panthers
                                                                        <option />New Orleans Saints
                                                                        <option />Tampa Bay Buccaneers
                                                                    </optgroup>
                                                                    <optgroup label="NFC WEST">
                                                                        <option />Arizona Cardinals
                                                                        <option />St. Louis Rams
                                                                        <option />San Francisco 49ers
                                                                        <option />Seattle Seahawks
                                                                    </optgroup>
                                                                    <optgroup label="AFC EAST">
                                                                        <option />Buffalo Bills
                                                                        <option />Miami Dolphins
                                                                        <option />New England Patriots
                                                                        <option />New York Jets
                                                                    </optgroup>
                                                                    <optgroup label="AFC NORTH">
                                                                        <option />Baltimore Ravens
                                                                        <option />Cincinnati Bengals
                                                                        <option />Cleveland Browns
                                                                        <option />Pittsburgh Steelers
                                                                    </optgroup>
                                                                    <optgroup label="AFC SOUTH">
                                                                        <option />Houston Texans
                                                                        <option />Indianapolis Colts
                                                                        <option />Jacksonville Jaguars
                                                                        <option />Tennessee Titans
                                                                    </optgroup>
                                                                    <optgroup label="AFC WEST">
                                                                        <option />Denver Broncos
                                                                        <option />Kansas City Chiefs
                                                                        <option />Oakland Raiders
                                                                        <option />San Diego Chargers
                                                                    </optgroup>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputEditorSimple">Simple Editor</label>
                                                            <div class="controls">
                                                                <textarea id="inputEditorSimple" class="span10" rows="8" data-form="wysihtml5" placeholder="Enter text ..."></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="form-actions">
                                                            <button type="submit" class="btn btn-primary">Save changes</button>
                                                            <button type="button" class="btn">Cancel</button>
                                                        </div>
                                                    </form>
                                                    <!--/element-->
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span--> 
                                    </div><!--/element-->
                                    
                                    <!-- =========================================
                                                        VALIDATION
                                    =========================================== -->
                                    <!--validation-->
                                    <div id="validation" class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Validation</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!--validation-->
                                                    <form class="form-horizontal" id="form-validate" />
                                                        <fieldset>
                                                            <legend>Form Validate</legend>
                                                            <div class="control-group">
                                                                <label class="control-label" for="required">Required</label>
                                                                <div class="controls">
                                                                    <input type="text" class="grd-white" data-validate="{required: true, messages:{required:'Please enter field required'}}" name="required" id="required" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="minlength">Min Length</label>
                                                                <div class="controls">
                                                                    <input type="text" class="grd-white" data-validate="{required: true, minlength: 2, messages:{required:'Please enter field min length', minlength:'Please enter at least 2 characters.'}}" name="minlength" id="minlength" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="maxlength">Max Length</label>
                                                                <div class="controls">
                                                                    <input type="text" class="grd-white" data-validate="{required: true, maxlength: 6, messages:{required:'Please enter field max length', maxlength:'Please enter a maximum of 6 characters.'}}" name="maxlength" id="maxlength" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="email">Email</label>
                                                                <div class="controls">
                                                                    <input type="text" class="grd-white" data-validate="{required: true, email:true, messages:{required:'Please enter field email', email:'Please enter a valid email address'}}" name="email" id="email" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="url">URL</label>
                                                                <div class="controls">
                                                                    <input type="text" class="grd-white" data-validate="{required: true, url:true, messages:{required:'Please enter field url', url:'Please enter a valid url'}}" name="url" id="url" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="date">Date</label>
                                                                <div class="controls">
                                                                    <input type="text" class="grd-white" data-validate="{required: true, date:true, messages:{required:'Please enter field date', date:'Please enter a valid date'}}" name="date" id="date" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="mins">Min</label>
                                                                <div class="controls">
                                                                    <input type="text" class="grd-white" data-validate="{required: true, number:true, min: 5, messages:{required:'Please enter field min', number:'Please enter a valid number', min:'Please enter a number greater than or equal to 5'}}" name="mins" id="mins" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="maxs">Max</label>
                                                                <div class="controls">
                                                                    <input type="text" class="grd-white" data-validate="{required: true, number:true, max: 5, messages:{required:'Please enter field max', number:'Please enter a valid number', min:'Please enter a number less than or equal to 5'}}" name="maxs" id="maxs" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="number">Number</label>
                                                                <div class="controls">
                                                                    <input type="text" class="grd-white" data-validate="{required: true, number:true, messages:{required:'Please enter field number', number:'Please enter a valid number'}}" name="number" id="number" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="password">Password</label>
                                                                <div class="controls">
                                                                    <input type="password" class="grd-white" data-validate="{required: true, messages:{required:'Please enter field password'}}" name="password" id="password" />
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label" for="cpassword">Confirm Password</label>
                                                                <div class="controls">
                                                                    <input type="password" class="grd-white" data-validate="{required: true, equalTo: '#password', messages:{required:'Please enter field confirm password', equalTo: 'confirmation password does not match the password'}}" name="cpassword" id="cpassword" />
                                                                </div>
                                                            </div>
                                                            <div class="form-actions">
                                                                <button type="submit" class="btn btn-primary">Save changes</button>
                                                                <button type="button" class="btn">Cancel</button>
                                                            </div>
                                                        </fieldset>
                                                    </form><!--/validation-->
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span--> 
                                    </div><!--/validation-->
                                    
                                    <!-- =========================================
                                                        WIZARD
                                    =========================================== -->
                                    <!--wizard-->
                                    <div id="wizard" class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Wizard & Validation</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!--wizard-->
                                                    <div id="form-wizard">
                                                        <form name="form-wizard" id="wrapped" class="form-horizontal" />
                                                            <div class="step">
                                                                <div class="control-group">
                                                                    <label class="control-label" for="firstname">What is your first name?</label>
                                                                    <div class="controls">
                                                                        <input type="text" name="firstname" class="grd-white" id="firstname" data-validate="{required: true}" />
                                                                    </div>
                                                                </div>
                                                                <div class="control-group">
                                                                    <label class="control-label" for="lastname">What is your last name?</label>
                                                                    <div class="controls">
                                                                        <input type="text" name="lastname" class="grd-white" id="lastname" data-validate="{required: true}" />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                                
                                                            <div class="step">
                                                                <div class="control-group">
                                                                    <label class="control-label">your gender?</label>
                                                                    <div class="controls">
                                                                        <label class="radio">
                                                                            <input type="radio" data-form="uniform" name="gender" id="gender1" value="male" data-validate="{required: true}" />Male 
                                                                        </label><br />
                                                                        <label class="radio">
                                                                            <input type="radio" data-form="uniform" name="gender" value="female" />Female
                                                                        </label>
                                                                        <span id="error-gender"></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                                
                                                            <div class="submit step">
                                                                <div class="control-group">
                                                                    <p class="help-block">Thanks!</p>
                                                                </div>
                                                            </div>
                                                            
                                                            <div class="form-actions">
                                                                <button type="button" name="backward" class="btn backward">Backward</button>
                                                                <button type="button" name="forward" class="btn forward">Forward</button>
                                                                <button type="submit" name="process" class="btn btn-primary submit">Submit</button>
                                                            </div>
                                                        </form>
                                                    </div><!--/wizard-->
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span--> 
                                    </div><!--/wizard-->
                                    
                                    <!-- =========================================
                                                EXTENDING FORM CONTROLS
                                    =========================================== -->
                                    <!--extending-->
                                    <div id="extending" class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Extending form controls</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!--extending form controls-->
                                                    <form class="form-horizontal" />
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputPrepand">Prepand</label>
                                                            <div class="controls">
                                                                <div class="input-prepend">
                                                                    <span class="add-on">@</span>
                                                                    <input id="inputPrepand" class="grd-white" type="text" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputIconPrepand">Icon Prepand</label>
                                                            <div class="controls">
                                                                <div class="input-icon-prepend">
                                                                    <span class="icon"><i class="icofont-envelope"></i></span>
                                                                    <input id="inputIconPrepand" class="grd-white" type="text" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputAppend">Append</label>
                                                            <div class="controls">
                                                                <div class="input-append">
                                                                    <input id="inputAppend" class="grd-white" type="text" />
                                                                    <span class="add-on">.00</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputIconAppend">Icon Append</label>
                                                            <div class="controls">
                                                                <div class="input-icon-append">
                                                                    <span class="icon"><i class="icofont-envelope"></i></span>
                                                                    <input id="inputIconAppend" class="grd-white" maxlength="20" type="text" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputCombined">Combined</label>
                                                            <div class="controls">
                                                                <div class="input-prepend input-append">
                                                                    <span class="add-on">$</span>
                                                                    <input id="inputCombined" class="grd-white" type="text" />
                                                                    <span class="add-on">.00</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputCombinedIcon">Icon Combined</label>
                                                            <div class="controls">
                                                                <div class="input-append input-icon-prepend">
                                                                    <div class="add-on">
                                                                        <a title="search" class="icon"><i class="icofont-search"></i></a>
                                                                        <input type="text" class="grd-white" />
                                                                    </div>
                                                                    <input id="inputCombinedIcon" type="submit" class="btn" value="Search" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="appendedInputButtons">Buttons instead of text</label>
                                                            <div class="controls">
                                                                <div class="input-append">
                                                                    <input id="appendedInputButtons" class="grd-white" type="text" />
                                                                    <button class="btn" type="button">Search</button>
                                                                    <button class="btn" type="button">Options</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="appendedDropdownButton">Button dropdowns</label>
                                                            <div class="controls">
                                                                <div class="input-append">
                                                                    <input id="appendedDropdownButton" class="grd-white" type="text" />
                                                                    <div class="btn-group">
                                                                        <button class="btn dropdown-toggle" data-toggle="dropdown">
                                                                            Action
                                                                            <span class="caret"></span>
                                                                        </button>
                                                                        <ul class="dropdown-menu">
                                                                            <li><a href="#">Action</a></li>
                                                                            <li><a href="#">Another action</a></li>
                                                                            <li><a href="#">Something else here</a></li>
                                                                            <li class="divider"></li>
                                                                            <li><a href="#">Separated link</a></li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="appendedDropdownGroup">Segmented dropdown</label>
                                                            <div class="controls">
                                                                <div class="input-append">
                                                                    <input id="appendedDropdownGroup" class="grd-white" type="text" />
                                                                    <div class="btn-group">
                                                                        <button class="btn">Action</button>
                                                                        <button class="btn dropdown-toggle" data-toggle="dropdown">
                                                                            <span class="caret"></span>
                                                                        </button>
                                                                        <ul class="dropdown-menu">
                                                                            <li><a href="#">Action</a></li>
                                                                            <li><a href="#">Another action</a></li>
                                                                            <li><a href="#">Something else here</a></li>
                                                                            <li class="divider"></li>
                                                                            <li><a href="#">Separated link</a></li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="inputSearch">Search form</label>
                                                            <div class="controls">
                                                                <div class="form-search">
                                                                    <div class="input-append">
                                                                        <input type="text" class="grd-white" id="inputSearch" class="search-query" />
                                                                        <button type="submit" class="btn">Search</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                    <!--/extending form controls-->
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span--> 
                                    </div><!--/extending-->
                                    
                                    <!-- =========================================
                                                    CONTROL STATES
                                    =========================================== -->
                                    <!--controls-->
                                    <div id="controls" class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Control States</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!--grid sizing-->
                                                    <form />
                                                        <div class="row-fluid">
                                                            <div class="span6">
                                                                <div class="control-group warning">
                                                                    <label class="control-label" for="inputWarning">Input with warning</label>
                                                                    <div class="controls">
                                                                        <input type="text" class="grd-white" id="inputWarning" />
                                                                        <span class="help-inline">Something may have gone wrong</span>
                                                                    </div>
                                                                </div>
                                                                <div class="control-group error">
                                                                    <label class="control-label" for="inputError">Input with error</label>
                                                                    <div class="controls">
                                                                        <input type="text" class="grd-white" id="inputError" />
                                                                        <span class="help-inline">Please correct the error</span>
                                                                    </div>
                                                                </div>
                                                                <div class="control-group info">
                                                                    <label class="control-label" for="inputInfo">Input with info</label>
                                                                    <div class="controls">
                                                                        <input type="text" class="grd-white" id="inputInfo" />
                                                                        <span class="help-inline">Username is taken</span>
                                                                    </div>
                                                                </div>
                                                                <div class="control-group success">
                                                                    <label class="control-label" for="inputSuccess">Input with success</label>
                                                                    <div class="controls">
                                                                        <input type="text" class="grd-white" id="inputSuccess" />
                                                                        <span class="help-inline">Woohoo!</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                            <div class="span6">
                                                                <div class="control-group">
                                                                    <label class="control-label">Uneditable inputs</label>
                                                                    <div class="controls">
                                                                        <span class="input-xlarge uneditable-input">Some value here</span>
                                                                    </div>
                                                                </div>
                                                                <div class="control-group">
                                                                    <label class="control-label" for="inputDisabled">Disabled inputs</label>
                                                                    <div class="controls">
                                                                        <input class="input-xlarge" id="inputDisabled" type="text" placeholder="Disabled input here..." disabled="" />
                                                                    </div>
                                                                </div>
                                                                <div class="control-group">
                                                                    <label class="control-label">Form actions</label>
                                                                    <div class="controls">
                                                                        <div class="form-actions">
                                                                            <button type="submit" class="btn btn-primary">Save changes</button>
                                                                            <button type="button" class="btn">Cancel</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                    <!--/grid sizing-->
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span--> 
                                    </div><!--/controls-->
                                    
                                    <!-- =========================================
                                                        WIZARD
                                    =========================================== -->
                                    <!--buttons-->
                                    <div id="buttons" class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Buttons</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!--buttons-->
                                                    <table class="table table-bordered table-striped responsive">
                                                        <thead>
                                                            <tr>
                                                                <th>Button</th>
                                                                <th>class=""</th>
                                                                <th>Description</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td><button type="button" class="btn">Default</button></td>
                                                                <td><code>btn</code></td>
                                                                <td>Standard gray button with gradient</td>
                                                            </tr>
                                                            <tr>
                                                                <td><button type="button" class="btn btn-primary">Primary</button></td>
                                                                <td><code>btn btn-primary</code></td>
                                                                <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
                                                            </tr>
                                                            <tr>
                                                                <td><button type="button" class="btn btn-info">Info</button></td>
                                                                <td><code>btn btn-info</code></td>
                                                                <td>Used as an alternative to the default styles</td>
                                                            </tr>
                                                            <tr>
                                                                <td><button type="button" class="btn btn-success">Success</button></td>
                                                                <td><code>btn btn-success</code></td>
                                                                <td>Indicates a successful or positive action</td>
                                                            </tr>
                                                            <tr>
                                                                <td><button type="button" class="btn btn-warning">Warning</button></td>
                                                                <td><code>btn btn-warning</code></td>
                                                                <td>Indicates caution should be taken with this action</td>
                                                            </tr>
                                                            <tr>
                                                                <td><button type="button" class="btn btn-danger">Danger</button></td>
                                                                <td><code>btn btn-danger</code></td>
                                                                <td>Indicates a dangerous or potentially negative action</td>
                                                            </tr>
                                                            <tr>
                                                                <td><button type="button" class="btn btn-inverse">Inverse</button></td>
                                                                <td><code>btn btn-inverse</code></td>
                                                                <td>Alternate dark gray button, not tied to a semantic action or use</td>
                                                            </tr>
                                                            <tr>
                                                                <td><button type="button" class="btn btn-link">Link</button></td>
                                                                <td><code>btn btn-link</code></td>
                                                                <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <div class="row-fluid">
                                                        <div class="span6">
                                                            <div class="box corner-all">
                                                                <div class="box-header grd-teal color-white corner-top">
                                                                    <div class="header-control">
                                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                                    </div>
                                                                    <span>Button sizes</span>
                                                                </div>
                                                                <div class="box-body">
                                                                    <p>
                                                                        <button type="button" class="btn btn-large btn-primary">Large button</button>
                                                                        <button type="button" class="btn btn-large">Large button</button>
                                                                    </p>
                                                                    
                                                                    <div class="divider-content"><span></span></div>
                                                                    
                                                                    <p>
                                                                        <button type="button" class="btn btn-primary">Default button</button>
                                                                        <button type="button" class="btn">Default button</button>
                                                                    </p>
                                                                    
                                                                    <div class="divider-content"><span></span></div>
                                                                    
                                                                    <p>
                                                                        <button type="button" class="btn btn-small btn-primary">Small button</button>
                                                                        <button type="button" class="btn btn-small">Small button</button>
                                                                    </p>
                                                                    
                                                                    <div class="divider-content"><span></span></div>
                                                                    
                                                                    <p>
                                                                        <button type="button" class="btn btn-mini btn-primary">Mini button</button>
                                                                        <button type="button" class="btn btn-mini">Mini button</button>
                                                                    </p>
                                                                    
                                                                    <div class="divider-content"><span></span></div>
                                                                    
                                                                    <p>
                                                                        <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
                                                                        <button type="button" class="btn btn-large btn-block">Block level button</button>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div class="box corner-all">
                                                                <div class="box-header grd-teal color-white corner-top">
                                                                    <div class="header-control">
                                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                                    </div>
                                                                    <span>Button groups</span>
                                                                </div>
                                                                <div class="box-body">
                                                                    <div class="btn-group">
                                                                        <button class="btn">1</button>
                                                                        <button class="btn">2</button>
                                                                        <button class="btn">3</button>
                                                                    </div>
                                                                    
                                                                    <div class="divider-content"><span></span></div>
                                                                    
                                                                    <div class="btn-toolbar">
                                                                        <div class="btn-group">
                                                                            <button class="btn"><i class="icofont-play"></i></button>
                                                                            <button class="btn"><i class="icofont-pause"></i></button>
                                                                            <button class="btn"><i class="icofont-stop"></i></button>
                                                                        </div>
                                                                        <div class="btn-group">
                                                                            <button class="btn"><i class="icofont-backward"></i></button>
                                                                            <button class="btn"><i class="icofont-forward"></i></button>
                                                                        </div>
                                                                        <div class="btn-group">
                                                                            <button class="btn"><i class="icofont-eject"></i></button>
                                                                        </div>
                                                                    </div>
                                                                    
                                                                    <div class="divider-content"><span></span></div>
                                                                    
                                                                    <div class="btn-group btn-group-vertical">
                                                                        <button class="btn">1</button>
                                                                        <button class="btn">2</button>
                                                                        <button class="btn">3</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="span6">
                                                            <div class="box corner-all">
                                                                <div class="box-header grd-teal color-white corner-top">
                                                                    <div class="header-control">
                                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                                    </div>
                                                                    <span>Element</span>
                                                                </div>
                                                                <div class="box-body">
                                                                        <button type="button" class="btn btn-primary disabled" disabled="disabled">Disabled Button</button>
                                                                        <button type="button" class="btn" disabled="">Disabled Button</button>
                                                                        
                                                                        <div class="divider-content"><span></span></div>
                                                                    
                                                                        <a class="btn" href="#">Anchor Element</a>
                                                                    
                                                                        <div class="divider-content"><span></span></div>
                                                                    
                                                                        <button class="btn" type="submit">Button Element</button>
                                                                        
                                                                        <div class="divider-content"><span></span></div>
                                                                    
                                                                        <input class="btn" type="button" value="Input Element" />
                                                                        
                                                                        <div class="divider-content"><span></span></div>
                                                                    
                                                                        <input class="btn" type="submit" value="Submit Element" />
                                                                        
                                                                </div>
                                                            </div>
                                                            <div class="box corner-all">
                                                                <div class="box-header grd-teal color-white corner-top">
                                                                    <div class="header-control">
                                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                                    </div>
                                                                    <span>Button dropdown</span>
                                                                </div>
                                                                <div class="box-body">
                                                                    <!-- btn-toolbar -->
                                                                    <div class="btn-toolbar" style="margin: 0;">
                                                                        <div class="btn-group">
                                                                            <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                    </div><!-- /btn-toolbar -->
                                                                    
                                                                    <div class="divider-content"><span></span></div>
                                                                    
                                                                    <!-- btn-toolbar, Works with all button sizes -->
                                                                    <div class="btn-toolbar" style="margin: 0;">
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                    </div><!-- /btn-toolbar -->
                                                                    
                                                                    <div class="divider-content"><span></span></div>
                                                                    
                                                                    <!-- btn-toolbar, Split button dropdowns -->
                                                                    <div class="btn-toolbar" style="margin: 0;">
                                                                        <div class="btn-group">
                                                                            <button class="btn">Action</button>
                                                                            <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-primary">Action</button>
                                                                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-danger">Danger</button>
                                                                            <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-warning">Warning</button>
                                                                            <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                    </div><!-- /btn-toolbar -->
                                                                    
                                                                    <div class="divider-content"><span></span></div>
                                                                    
                                                                    <!-- /btn-toolbar, Split button with size -->
                                                                    <div class="btn-toolbar">
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-large">Large action</button>
                                                                            <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                    </div><!-- /btn-toolbar -->
                                                                    <div class="btn-toolbar">
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-small">Small action</button>
                                                                            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                    </div><!-- /btn-toolbar -->
                                                                    <div class="btn-toolbar">
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-mini">Mini action</button>
                                                                            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                                            <ul class="dropdown-menu">
                                                                                <li><a href="#">Action</a></li>
                                                                                <li><a href="#">Another action</a></li>
                                                                                <li><a href="#">Something else here</a></li>
                                                                                <li class="divider"></li>
                                                                                <li><a href="#">Separated link</a></li>
                                                                            </ul>
                                                                        </div><!-- /btn-group -->
                                                                    </div><!-- /btn-toolbar -->
                                                                </div><!--/box body-->
                                                            </div><!--/box-->
                                                        </div><!--/span--> 
                                                    </div><!--/row--> 
                                                    <!--/buttons-->
                                                    
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span--> 
                                    </div><!--/buttons-->
                                    
                                </div><!--/span-->
                            </div><!--/row-fluid-->
                            <!--/form-->
                        </div><!--/content-body -->
                    </div><!-- /content -->
                </div><!-- /span content -->
                
                <!-- span side-right -->
                <div class="span2">
                    <!-- side-right -->
                    <aside class="side-right">
                        <!-- sidebar-right -->
                        <div class="sidebar-right">
                            <!--sidebar-right-header-->
                            <div class="sidebar-right-header">
                                <div class="sr-header-right">
                                    <h2><span class="label label-info">$26,875</span></h2>
                                </div>
                                <div class="sr-header-left">
                                    <p class="bold">Balance</p>
                                    <small class="muted">Dec 30 2012</small>
                                </div>
                            </div><!--/sidebar-right-header-->
                            <!--sidebar-right-control-->
                            <div class="sidebar-right-control">
                                <ul class="sr-control-item">
                                    <li class="active"><a href="#alt1" data-toggle="tab" title="alternative 1"><i class="icofont-th"></i></a></li>
                                    <li><a href="#alt2" data-toggle="tab" title="alternative 2"><i class="icofont-paper-clip"></i></a></li>
                                    <li rel="tooltip-bottom" title="view site"><a href="index.html" target="_BLANK"><i class="icofont-external-link"></i></a></li>
                                </ul>
                            </div><!-- /sidebar-right-control-->
                            <!-- sidebar-right-content -->
                            <div class="sidebar-right-content">
                                <div class="tab-content">
                                    <!--alternative 1-->
                                    <div class="tab-pane fade active in" id="alt1">
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <button class="btn btn-block btn-mini btn-primary">Add Action</button>
                                        <button class="btn btn-block btn-mini">Add Action</button>
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <!-- side-task -->
                                        <div class="side-task">
                                            <div class="task active">
                                                <span class="task-header">
                                                    <img src="img/loader_16.gif" /> 
                                                    <strong>Portofolio_W34GF.zip</strong>
                                                </span>
                                                <span class="task-desc">9.1 of 17MB - 243KB/sec - 1 min</span>
                                                <div class="progress progress-striped active" rel="tooltip" title="40%">
                                                    <div class="bar bar-success" style="width: 40%;"></div>
                                                </div>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Paralax_bg_5448.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-remove-sign color-red" title="failed"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="typicn-loop color-silver-dark" title="cancel"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="typicn-loop color-silver-dark" title="cancel"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Icons_bg_I98GH.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-remove-sign color-red" title="failed"></i>
                                                <span class="task-desc">Dashboard_3805.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                        </div><!-- /side-task -->
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                    </div><!--/alternative 1-->
                                    
                                    <!--alternative 2-->
                                    <div class="tab-pane fade" id="alt2">
                                        <div class="side-box">
                                            <form />
                                                <div class="control-group">
                                                    <label class="control-label" for="basicInput">Basic Input</label>
                                                    <div class="controls">
                                                        <input type="text" id="basicInput" class="input-block-level grd-white" />
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label class="control-label" for="IconPrepand">Icon Prepand</label>
                                                    <div class="controls">
                                                        <div class="input-icon-prepend">
                                                            <span class="icon">
                                                                <i class="icofont-envelope"></i>
                                                            </span>
                                                            <input id="IconPrepand" class="input-block-level grd-white" type="text" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label class="control-label" for="singleSelect">Single Select</label>
                                                    <div class="controls">
                                                        <select id="singleSelect" data-form="select2" style="width:100%" data-placeholder="Your Favorite Type of Bear">
                                                            <option />American Black Bear
                                                            <option />Asiatic Black Bear
                                                            <option />Brown Bear
                                                            <option />Giant Panda
                                                            <option selected="" />Sloth Bear
                                                            <option disabled="" />Sun Bear
                                                            <option />Polar Bear
                                                            <option disabled="" />Spectacled Bear
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label class="control-label" for="SelectMulti">Multiple Select</label>
                                                    <div class="controls">
                                                        <select id="SelectMulti" data-form="select2" style="width:100%" data-placeholder="Your Favorite Type of Bear" multiple="">
                                                            <option />American Black Bear
                                                            <option />Asiatic Black Bear
                                                            <option />Brown Bear
                                                            <option />Giant Panda
                                                            <option selected="" />Sloth Bear
                                                            <option disabled="" />Sun Bear
                                                            <option />Polar Bear
                                                            <option disabled="" />Spectacled Bear
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label class="control-label">Tags Select</label>
                                                    <div class="controls">
                                                        <input type="hidden" id="tagsSelect" style="width: 100%;" value="brown" />
                                                    </div>
                                                </div>
                                                
                                                <div class="divider-content"><span></span></div>
                                                
                                                <div class="row-fluid">
                                                    <div class="span6">
                                                        <input type="reset" class="btn btn-block" value="Cancel" />
                                                    </div>
                                                    <div class="span6">
                                                        <input type="submit" class="btn btn-primary btn-block" value="submit" />
                                                    </div>
                                                </div>
                                                
                                                <div class="divider-content"><span></span></div>
                                            </form>
                                        </div>
                                    </div><!--/alternative 2-->
                                    
                                </div>
                            </div><!-- /sidebar-right-content -->
                        </div><!-- /sidebar-right -->
                    </aside><!-- /side-right -->
                </div><!-- /span side-right -->
            </div>
        </section>

        <!-- section footer -->
        <footer>
            <a rel="to-top" href="#top"><i class="icofont-circle-arrow-up"></i></a>
        </footer>

        <!-- javascript
        ================================================== -->
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/uniform/jquery.uniform.js"></script>
        
        <script src="js/datepicker/bootstrap-datepicker.js"></script>
        <script src="js/colorpicker/bootstrap-colorpicker.js"></script>
        <script src="js/select2/select2.js"></script>
        <script src="js/wysihtml5/wysihtml5-0.3.0.js"></script>
        <script src="js/wysihtml5/bootstrap-wysihtml5.js"></script>
        <script src="js/validate/jquery.validate.js"></script>
        <script src="js/validate/jquery.metadata.js"></script>
        <script src="js/wizard/jquery.ui.widget.js"></script> <!-- this required for jquery.wizard-->
        <script src="js/wizard/jquery.wizard.js"></script>
        <script src="js/responsive-tables/responsive-tables.js"></script>
        
        <!-- required stilearn template js, for full feature-->
        <script src="js/holder.js"></script>
        <script src="js/stilearn-base.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                // try your js
                
                // auto complete
                $('#inputAuto').typeahead({
                    source : ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
                });
                
                // select2
                $('#inputTags').select2({tags:["red", "green", "blue"]});
                $('[data-form=select2]').select2();
                $('[data-form=select2-group]').select2();
                
                // this select2 on side right
                $('#tagsSelect').select2({
                    tags:["red", "green", "blue"],
                    tokenSeparators: [",", " "]
                });
                
                
                // datepicker
                $('[data-form=datepicker]').datepicker();

                // coloricker
                $('[data-form=colorpicker]').colorpicker();
                
                
                // uniform
                $('[data-form=uniform]').uniform()

                // wysihtml5
                $('[data-form=wysihtml5]').wysihtml5();
                
                
                // validate form
                $('#form-validate').validate();
                
                // wizard
                $('#form-wizard').wizard({
                    stepsWrapper: "#wrapped",
                    submit: ".submit",
                    beforeSelect: function( event, state ) {
                        var inputs = $(this).wizard('state').step.find(':input');
                        return !inputs.length || !!inputs.valid();
                    }
                }).submit(function( event ) {
                    event.preventDefault();
                    alert('Form submitted!');
                }).wizard('form').validate({
                    errorPlacement: function(error, element) { 
                        if ( element.is(':radio') || element.is(':checkbox') ) {
                                $('#error-gender').html(error);
                        } else { 
                                error.insertAfter( element );
                        }
                    }
                });
                
            });
      
        </script>
    </body>
</html>
